<!-- subpkg_medicine/payment/index.vue -->
<script lang="ts" setup>
  import { orderPayApi } from '@/apis/consult'
  import { addressListApi, createOrderApi, preOrderApi } from '@/apis/order'
  import type { Address, OrderPre } from '@/types/order'
  import { ref } from 'vue'

  // ----------- 1. 收货地址信息 -----------------
  const addressInfo = ref({} as Address)
  // 用户收货地址
  const getAddressList = async () => {
    // 地址列表接口
    const data = await addressListApi()
    // 渲染地址列表数据
    addressInfo.value = data[0]
    console.log(addressInfo.value)
  }
  // 获取收货地址列表
  getAddressList()

  // ------------ 2. 获取处方订单信息 -----------------
  // 2.1 先获取处方id
  const prescriptionId = defineProps<{ id: string }>()
  // 2.2 发请求获取处方信息
  const prescriptionInfo = ref({} as OrderPre)
  const getPrescriptionInfo = async () => {
    const res = await preOrderApi(prescriptionId.id)
    // console.log(res)
    prescriptionInfo.value = res
  }
  // 2.3 调用上面方法
  getPrescriptionInfo()

  // ----------------------3.支付弹窗------------------
  const orderId = ref('')
  // 支付渠道组件实例
  const paymentRef = ref()

  // 关闭支付渠道弹层
  const onPaymentClose = () => {
    paymentRef.value.close()
  }

  // 支付渠道确认支付
  const onPaymentConfirm = async (index: number) => {
    // console.log(index)
    if (index === 0) {
      // 微信支付
      return uni.showToast({
        title: '暂不支持微信支付',
        icon: 'error',
      })
    }
    const res = await orderPayApi({
      orderId: orderId.value,
      paymentMethod: index + '',
      payCallback:
        'https://env-00jxu6xfoqpq-static.normal.cloudstatic.cn/index.html#/subpkg_medicine/pay_result/index',
    })
    window.location.href = res.payUrl
  }

  // 选择支付渠道 -- 发请求获取订单id
  const onPaymentButtonClick = async () => {
    if (orderId.value == '') {
      // 发送请求,获取已创建的订单id
      const res = await createOrderApi(prescriptionId.id, addressInfo.value.id)
      // console.log(res)
      orderId.value = res.id
    }

    paymentRef.value.open()
  }
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.county }}
          </view>
          <view class="detail">{{ addressInfo.addressDetail }}</view>
          <view class="receiver">{{ addressInfo.receiver }}{{ addressInfo.mobile }}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view
          class="medicine-list-item"
          v-for="(item, index) in prescriptionInfo.medicines"
          :key="item.id"
        >
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${prescriptionInfo.payment}`" />
          <uni-list-item title="运费" :right-text="`¥${prescriptionInfo.expressFee}.00`" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`-¥${prescriptionInfo.couponDeduction}.00`"
          />
          <uni-list-item title="实付款" :right-text="`¥${prescriptionInfo.payment}.00`" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ prescriptionInfo.actualPayment }}.00</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="onPaymentButtonClick">立即支付</button>
        </view>
      </view>
    </view>
  </scroll-page>
  <!-- 支付渠道 -->
  <custom-payment
    @close="onPaymentClose"
    @confirm="onPaymentConfirm"
    :amount="prescriptionInfo.actualPayment"
    :order-id="orderId"
    ref="paymentRef"
  />
</template>

<style lang="scss">
  @import './index.scss';
</style>
